<template>
    <div class="home-page-main-box" v-loading="loading">
      <div class="home-page-author-box">
        <img :src="info.header_image" v-preview="info.header_image" :alt="info.nickname" class="home-page-author-img">
        <span class="home-page-author-name">{{info.nickname}}
          <span class="iconfont icon-nan" v-if="info.sex==='男'"></span>
          <span class="iconfont icon-nv" v-if="info.sex==='女'"></span>
        </span>
        <div class="home-page-author-info">
          <span class="home-page-author-follow" ><i class="iconfont icon-guanzhu" title="关注数"></i>{{info.follow_num}}</span>
          <span class="home-page-author-follow" ><i class="iconfont icon-fensiquanguanzhu" title="粉丝数"></i>{{info.fans_num}}</span>
          <span class="home-page-author-works" ><i class="iconfont icon-wenzhang" title="发布宠博数"></i>{{info.article_num}}</span>
          <span class="home-page-author-like" ><i class="iconfont icon-favour-full" title="获赞数"></i>{{info.liked_num}}</span>
        </div>
      </div>
      <div class="home-page-divider"></div>
      <ul class="home-page-article">
        <li class="home-page-article-box" v-for="(item,index) in articleList" :key="index">
          <span class="home-page-article-title" @click="switchArticle(item)">{{item.title}}</span>
          <span class="home-page-article-content">{{item.desc}}</span>
          <div class="home-page-img-box">
            <img :src="item.cover_image" v-preview="item.cover_image"  class="home-page-article-img" alt="" v-if="showImg">
          </div>
          <span class="home-page-article-view-count"><i class="iconfont icon-yanjing"></i>{{item.click_number}}</span>
          <span class="home-page-article-comment"><i class="iconfont icon-pinglun"></i>{{item.comment_number}}</span>
          <span class="home-page-article-like"><i class="iconfont icon-favour-full" style="font-size: 13px;margin-left: 7px"></i>{{item.like_number}}</span>
          <span class="home-page-article-post-time">{{item.add_time}}</span>
          <i class="iconfont icon-shanchu" @click="showDialog(item)" v-if="!$route.query.id"></i>
          <div class="home-page-article-divider"></div>
        </li>
      </ul>
      <NoData v-if="count===0" :tip="tip" />

      <div style="text-align: right">
        <el-pagination
          v-if="count!==0"
          class="home-page-pages"
          background
          layout="prev, pager, next"
          :total="count"
          @current-change="changePage"
          :page-size="5">
        </el-pagination>
      </div>

      <el-dialog
        title="删除文章"
        :visible.sync="dialog"
        width="30%"
        center>
        <span>{{dialogText}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancel">确 定</el-button>
          <el-button @click="dialog = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getUser,getSpecialUser} from "../../api/user";
  import {getArticle,getSpecialArticle,deleteArticle} from "../../api/article";
  import Cookies from 'js-cookie'
  import NoData from '../../components/noData'


  export default {
      name: "index",
      data(){
        return{
          info:{
            article_num:'',
            fans_num:'',
            nickname:'',
            liked_num:'',
            follow_num:'',
            header_image:'',
          },
          dialog:false,   //控制dialog的显示
          dialogText:'',   //dialog的显示文本内容
          deleteId:'',   //要删除的文章id
          loading:false,
          userId:'',      //存放路由传值的用户id
          count:0,     //文章个数
          articleList:{
            title:'',
            desc:'',
            cover_image:'',
            click_number:'',
            like_number:'',
            comment_number:'',
            add_time:'',
          },
          tip:'该用户还没有创作的文章哦',
        }
      },
      computed:{
        ...mapState('base', {
          showImg: state => state.showImg
        })
      },
      components:{
        NoData
      },
      created(){
        let vm=this;
        vm.loading=true;
        if(vm.$route.query.id!==undefined){    //先判断是否有id的路由传值
          vm.userId=vm.$route.query.id;
          vm.getSpecialUserList();
          vm.getSpecialArticleAllList();
        }else{
          if(Cookies.get('token')){
            vm.getUserList();
            vm.getArticleList();
          }else{
            vm.$router.push('/login');
            vm.$message.error('登陆以后才能访问个人主页');
          }
        }
      },
      methods:{
        //获取用户个人信息
        getUserList(){
          let vm=this;
          getUser().then(res=>{
            vm.info=res.data;
            this.loading=false;
          }).catch(error=>{
            this.loading=false;
          })
        },
        //拉取个人的所有文章
        getArticleList(){
          let vm=this;
          getArticle('?ordering=-add_time').then(res=>{
            vm.articleList=res.data.results;
            vm.count=res.data.count;
          }).catch(errors=>{

          })
        },
        getSpecialUserList(){
          let vm=this;
          getSpecialUser(this.userId).then(res=>{
            vm.info=res.data.results[0];
            this.loading=false;
          }).catch(error=>{
            this.loading=false;
          })
        },
        getSpecialArticleAllList(){
          let vm=this;
          getSpecialArticle(this.userId,'ordering=-add_time').then(res=>{
            vm.articleList=res.data.results;
            vm.count=res.data.count;
          }).catch(errors=>{

          })
        },
        switchArticle(item){
          this.$router.push({path:'/article',query:{'id':item.id}});
        },
        showDialog(item){
          this.deleteId=item.id;
          this.dialogText='确定要删除《'+ item.title +'》吗？';
          this.dialog=true;
        },
        cancel(){
          let vm=this;
          vm.dialogText='正在删除中...';
          deleteArticle(vm.deleteId).then(res=>{
            vm.$message.success('删除成功');
            if(vm.$route.query.id!==undefined){    //先判断是否有id的路由传值
              vm.getSpecialArticleAllList();
            }else{
              if(Cookies.get('token')){
                vm.getArticleList();
              }else{
                vm.$router.push('/login');
                vm.$message.error('登陆以后才能访问个人主页');
              }
            }
          }).catch(error=>{
            vm.$message.error('删除失败');
          });
          vm.dialog=false;
        },
        changePage(now){
          let vm=this;
          if(vm.$route.query.id!==undefined){    //先判断是否有id的路由传值
            getSpecialArticle(this.userId,'page=' + now + '&ordering=-add_time').then(res=>{
              vm.articleList=res.data.results;
              vm.count=res.data.count;
            }).catch(errors=>{

            })
          }else{
            if(Cookies.get('token')){
              getArticle('?page=' + now + '&ordering=-add_time').then(res=>{
                vm.articleList=res.data.results;
                vm.count=res.data.count;
              }).catch(errors=>{

              })
            }else{
              vm.$router.push('/login');
              vm.$message.error('登陆以后才能访问个人主页');
            }
          }
        },
      }
    }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

  .home-page-main-box{
    width 100%
    max-width 600px!important
    margin 0 auto
  }
  .home-page-author-box{
    margin  20px 0 30px 0
  }
  .home-page-author-img{
    width 80px
    height 80px
    float left
    border-radius 80px
    cursor zoom-in
    border 1px solid $color-border
  }
  .home-page-author-name{
    font-size 21px
    font-weight 500
    display block
    padding 5px 0 0 100px
    color $color-title
  }
  .home-page-pages{
    margin-top 20px
    margin-bottom 30px
  }
  .home-page-author-info{
    font-size 15px
    padding 25px 0 0 100px
    color $color-sub
  }
  .home-page-divider{
    width: 100%;
    position: relative;
    top:-1px;
    height: 1px;
    background-color: $color-divider;
    max-width 600px
    margin 0 auto
  }




  //字体图标css
  .icon-guanzhu{
    margin-right 5px
  }
  .icon-fensiquanguanzhu{
    margin-right 5px
    margin-left 10px
    font-size 19px
  }
  .icon-wenzhang{
    margin-right 5px
    margin-left 10px
    font-size 16px
  }
  .icon-favour-full{
    margin-right 5px
    margin-left 10px
    font-size 18px
  }
  .icon-pinglun{
    font-size 12px
    margin-right 5px
  }
  .icon-yanjing{
    font-size 12px
    margin-right 5px
  }
  .icon-shanchu{
    color $color-gray
    font-size 13px
    margin-left 40px
    cursor pointer
  }


  //文章列表
  .home-page-article{
    list-style none
    padding 0
    margin 0
  }
  .home-page-article-box{
    position relative
    max-width 600px
    margin 0 auto
  }
  .home-page-img-box{
    width 150px
    height 100px
    right 0
    top 50%
    border-radius 6px
    display inline-block
    position absolute
    margin-top -51px
    overflow hidden
  }
  .home-page-article-img{
    width 150px
    height 100px
    position absolute
    border-radius 6px
    border 1px solid $color-border
    right 0
    top 50%
    margin-top -51px
    cursor zoom-in
    transition all 0.9s
  }
  .home-page-article-img:hover{
    transform scale(1.3)
  }
  .home-page-article-title{
    font-size 16px
    color $color-title
    font-weight 700
    display block
    margin-bottom 7px
    cursor pointer
    padding-top 16px
  }
  .home-page-article-title:hover{
    text-decoration  underline
  }
  .home-page-article-content{
    font-size 13px
    color $color-gray
    max-width 430px
    display block
    margin-bottom 7px
    line-height 25px
    min-height 50px
  }
  .home-page-article-view-count{
    font-size 12px
    color $color-gray
    display inline-block
    padding-bottom 16px
    margin-right 7px
    cursor pointer
  }
  .home-page-article-comment{
    font-size 12px
    color $color-gray
    display inline-block
  }
  .home-page-article-like{
    font-size 12px
    color $color-gray
  }
  .home-page-article-divider{
    width: 100%;
    height: 1px;
    background-color: $color-divider;
    max-width 600px
    margin 0 auto
  }
  .home-page-article-post-time{
    color $color-gray
    font-size 12px
    margin-left 7px
  }
  .icon-nan{
       color $color-blue
       font-size 18px
       font-weight 600
     }
.icon-nv{
  color $color-pink
  font-size 18px
  font-weight 600
}
</style>
